body {
    background-color: rgb(33, 183, 183);
    --themeColor: rgb(33, 183, 183);
}

body {
    background-color: var(--themeColor);
}

.kg {
    position: fixed;
    margin-top: 20px;
    margin-left: 1200px;
}

html,

body {
    width: 1200px;

    margin: 0 auto;

    height: 100%;

}

* {
    margin: 0;
    padding: 0;
}

.check {

    /* 直接将.check默认框隐藏不展示 */

    display: none;

}

/* 点击.check框时.radio背景变色 */

.check:checked+.radio {

    background: #ff6348;

}

/* 点击.check框时.radio伪元素圆形按钮移动 */

.check:checked+.radio::before {

    left: calc(100% - 5px);

    transform: translateX(-100%);

}

/* 点击.check框时.radio伪元素圆形按钮放大 */

.check:active+.radio::before {

    width: 130px;

}

/* 开关背景样式 */

.radio {

    position: relative;

    display: block;

    cursor: pointer;

    width: 114px;

    height: 52px;

    border-radius: 100px;

    background: linear-gradient(rgba(0, 0, 0, 0.07), rgba(255, 255, 255, 0)),

        #ddd;

    box-shadow: 0 0.07em 0.1em -0.1em rgba(0, 0, 0, 0.4) inset,

        0 0.05em 0.08em -0.01em rgba(255, 255, 255, 0.7);

}

/* 开关圆形按钮 */

.radio::before {

    content: '';

    position: absolute;

    width: 41px;

    height: 41px;

    background: linear-gradient(#f5f5f5 10%, #eeeeee);

    border-radius: 90px;

    top: 5px;

    left: 5px;

    transition: all 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86);

}